import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect } from 'react';
import { useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import Slider from '@react-native-community/slider';
import { getVolume, setVolume } from '~/utils/socketMessenger';
import { px2dp, scale } from '~/utils/px2dp';
import { NavBarHeader } from '~/components';
import { observer, webSocketStore } from '~/store';

export default observer(() => {
    const router = useRoute<any>();
    const { device_sn } = router.params || {};
    const { volume } = webSocketStore;
    const { t } = useTranslation();
    useEffect(() => {
        getVolume(device_sn, { sn_id: device_sn, set_state: 0, data: 0 });
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('VolumeControl.title')} />
            <View style={styles.content}>
                <Text>{t('VolumeControl.t1')}</Text>
                <Text style={styles.volume}>{volume}</Text>
                <Slider
                    style={styles.sliderStyle}
                    minimumValue={50}
                    maximumValue={100}
                    minimumTrackTintColor="#1877FF"
                    maximumTrackTintColor="#a4a4a4"
                    value={volume}
                    onSlidingComplete={(res: any) => {
                        setVolume(device_sn, { sn_id: device_sn, set_state: 1, data: parseInt(res) });
                        getVolume(device_sn, { sn_id: device_sn, set_state: 0, data: 0 });
                    }}
                />
                <Text style={styles.tips}>{t('VolumeControl.t2')}</Text>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        flex: 1,
        margin: px2dp(32),
    },
    sliderStyle: {
        marginVertical: px2dp(40),
    },
    tips: {
        marginTop: px2dp(32),
    },
    volume: {
        textAlign: 'center',
        color: '#1877FF',
        fontWeight: 'bold',
        fontSize: scale(32),
        position: 'absolute',
        right: 0,
        top: '4%',
    },
});
